<template>
  <div class="app-container">
    <div class="top">
      <div class="operate">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
          v-hasPermi="['leanTask:center:add']"
          >新增
        </el-button>
      </div>
      <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="68px"
        >
          <el-form-item>
            <el-checkbox
              v-model="queryParams.relatedVsMe"
              label="与我相关"
              border
              size="small"
              class="related-me"
              @change='handleQuery'
            ></el-checkbox>
          </el-form-item>
          <el-form-item prop="taskName"  class="width-150">
            <el-input
              v-model="queryParams.taskName"
              placeholder="请输入任务名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item prop="execUserName"  class="width-150">
            <el-input
              v-model="queryParams.execUserName"
              placeholder="请输入执行人"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <organizationCascader
              :clearData="{
                factory:true,
                workshop:true,
                line:true
              }"
              :widthData ="widthData"
              :isAllList="true"
              :arrData="queryParams"
              @change="queryParamsChange"
            ></organizationCascader>
          </el-form-item>

          <el-form-item prop="status" class="width-120">
            <el-select
              v-model="queryParams.status"
              placeholder="请选择状态"
              clearable
              size="small"
            >
              <el-option
                v-for="item in taskStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="handleDate" class="el-width-350">
            <el-date-picker
              clearable
              size="small"
              v-model="handleDate"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              start-placeholder="请选择开始时间"
              end-placeholder="请选择结束时间"
              @change="handleChangeDate">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleExport"
              v-hasPermi="['leanTask:center:export']"
              >导出
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        ref="Table"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        height="calc(100% - 88px - 50px)"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="任务ID" prop="taskNo"></el-table-column>
        <el-table-column label="任务名称" prop="taskName">
          <template slot-scope="{ row }">
            <el-button type="text" @click.stop="handleLook(row)">{{row.taskName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="所属工厂" prop="factoryDeptName"></el-table-column>
        <el-table-column label="所属车间" prop="workshopName"></el-table-column>
        <el-table-column label="所属产线" prop="lineName"></el-table-column>
        <el-table-column label="执行人" prop="execName"></el-table-column>
        <el-table-column label="任务时间" prop="reportDate" min-width="250">
          <template slot-scope="{ row }">
            <span>{{row.execStartDate}} - {{row.execEndDate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" min-width="60">
          <template slot-scope="{ row }">
            <span>{{taskStatusMap[row.status]}}</span>
          </template>
        </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="{ row }">
          <!-- "1": "待执行","2": "待审核","3": "已完成","4": "已驳回","5": "执行中","9": "已超时" -->
          <template v-if='(row.status == 1 || row.status == 4 || row.status == 5 || row.status == 9) && row.execUserName === name'>
            <el-button v-hasPermi="['leanTask:center:execute']" type="text" @click="handleExecute(row)">执行</el-button>
            <el-button v-hasPermi="['leanTask:center:transfer']" type="text" @click="handleTransfer(row)">转办</el-button>
          </template>

          <template v-if='row.status == 2 && row.createUserName === name'>
            <el-button v-hasPermi="['leanTask:center:approval']" type="text" @click="handleApproval(row)">审核</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />
    <transfer-dialog
      :visible.sync="transferDialog.visible"
      :row="transferDialog.row"
      @submit-success="getList"
    />
    <task-approval-dialog
      :visible.sync="approvalDialog.visible"
      :row="approvalDialog.row"
      @submit-success="getList"
    />
    <task-execute-dialog
      :visible.sync="executeDialog.visible"
      :row="executeDialog.row"
      @submit-success="getList"
    />
    <task-add-dialog
      :visible.sync="addDialog.visible"
      :row="addDialog.row"
      @submit-success="getList"
    />
    <task-detail-dialog
      :visible.sync="lookDialog.visible"
      :row="lookDialog.row"
      :mode="lookDialog.mode"
    />
  </div>
</template>
<script>
  import { taskStatusList,taskStatusMap } from "../enum";
  import { taskList,taskExport } from "@/api/leanTask/report";
  import organizationCascader from "@/views/components/organizationCascader";
  import transferDialog from "../components/transferDialog";
  import taskApprovalDialog from "../components/taskApprovalDialog";
  import taskExecuteDialog from "../components/taskExecuteDialog";
  import taskAddDialog from "../components/taskAddDialog";
  import taskDetailDialog from "../components/taskDetailDialog";
  import axios from 'axios'
  import { getToken } from '@/utils/auth'
  import { downloadFile } from '@/utils/file'
  import { parseTime } from '@/utils/eam'
  import service from "../../../utils/request";
  import { GEN_SERVER } from '@/config/baseUrl'
  import {mapGetters} from "vuex";
export default {
  name: "Center",
  components: { organizationCascader,transferDialog,taskApprovalDialog,taskExecuteDialog,taskAddDialog,taskDetailDialog},
  data() {
    return {
      queryParams: {
        taskName: null,
        execUserName: null,
        factoryDeptCode: null,
        factoryDeptId:null,
        workshopId:null,
        lineId:null,
        status: null,
        relatedVsMe:true,
        start:null,
        end:null
      },
      handleDate:[],
      list: [],
      taskStatusList,
      taskStatusMap,
      loading: false,
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      transferDialog: {
        visible: false,
        row: null,
      },
      executeDialog: {
        visible: false,
        row: null,
      },
      approvalDialog: {
        visible: false,
        row: null,
      },
      addDialog: {
        visible: false,
      },
      lookDialog:{
        visible: false,
        row: null,
        mode:null
      },
      widthData:{
        factory:"140px",
        workshop:"140px",
        line:"140px"
      }
    };
  },
  created() {
    //获取列表数据
    const result = this.getOwnFirstLine()
    this.queryParams.factoryDeptCode = result[0]?.factoryDeptCode;
    this.queryParams.factoryDeptId = result[0]?.factoryDeptId;
    this.queryParams.workshopId = result[1]?.workshopId;
    this.queryParams.workshopCode = result[1]?.workshopCode;
    this.queryParams.lineId = result[2]?.lineId;

    this.getList();
  },

  computed:{
    ...mapGetters([
      'name'
    ]),
  },

  methods: {
    getList() {
      this.loading = true;
      const { pageNum, pageSize } = this.pager;
      const {taskName,execUserName,factoryDeptCode,workshopId,lineId,factoryDeptId,status,relatedVsMe,start,end} = this.queryParams
      const params = {
        query: {
          taskName,
          execUserName,
          factoryDeptCode,
          workshopId,
          lineId,
          factoryDeptId,
          status,
          relatedVsMe,
          start,
          end
        },
        pageNum,
        pageSize,
      };
      taskList(params).then((res) => {
        this.list = res?.rows || {};
        this.pager.total = res?.total || 0;
        this.loading = false;
      })
      .catch(() => {
        this.list = [];
        this.pager.total = 0;
        this.loading = false;
      });
    },

    handleTransfer(row) {
      this.transferDialog.row = row;
      this.transferDialog.visible = true;
    },

    handleExecute(row){
      this.executeDialog.row = row;
      this.executeDialog.visible = true;
    },

    handleApproval(row){
      this.approvalDialog.row = row;
      this.approvalDialog.visible = true;
    },

    handleAdd(){
      this.addDialog.visible = true;
    },

    //导出
    handleExport() {
      this.loading = true;
      taskExport(this.queryParams).then((res) => {
        axios({
          baseURL:service.baseURL + GEN_SERVER['form-server'],
          url:'/refine/report/byte/down',
          method:"get",
          params:{id:res.msg},
          headers: {Authorization:'Bearer ' + getToken()},
          responseType: 'blob'
        }).then(data => {
          downloadFile(data.data,`改善任务列表${parseTime(new Date(), '{y}{m}{d}')}.xlsx`)
        }).catch(() => {
          this.msgError("操作失败")
        })
        this.loading = false;
      })
      .catch(() => {
        this.loading = false;
      });
    },

    handleLook(row){
      this.lookDialog.row = row;
      this.lookDialog.mode = "task";
      this.lookDialog.visible = true;
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      if (!row) {
        row = this.$refs.Table.selection[0] || null;
      }
      this.detailDialog.row = row;
      this.detailDialog.visible = true;
    },

    handleChangeDate(item){
      if (item) {
        this.queryParams.start = item[0];
        this.queryParams.end = item[1];
      } else {
        this.queryParams.start = "";
        this.queryParams.end = "";
      }
    },

    queryParamsChange({ factoryDeptCode, factoryDeptId,workshopId,lineId }) {
      this.queryParams.factoryDeptCode = factoryDeptCode;
      this.queryParams.factoryDeptId = factoryDeptId;
      this.queryParams.workshopId = workshopId;
      this.queryParams.lineId = lineId;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.pager.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleDate = [];
      this.queryParams.start = null;
      this.queryParams.end = null;
      this.queryParams.factoryDeptId = null;
      this.queryParams.factoryDeptCode = null;
      this.queryParams.workshopId = null;
      this.queryParams.workshopCode = null;
      this.queryParams.lineId = null;
      this.handleQuery();
    }
  },
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  justify-content:space-between;
  align-items: flex-start;
  .el-form {
    flex: 1;
    text-align: right;
    ::v-deep .el-form-item__content{
      line-height:0;
    }
    .el-range-editor{
      width:100%;
    }
  }
}
.pagination-container {
  margin: 0;
}
</style>
